<template>
  <div class="page">
    <!-- 头部 -->
    <app-header></app-header>
    <app-main
      v-loading.lock="isLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    ></app-main>

    <!-- 底部 -->
    <app-footer></app-footer>

    <!-- 右侧 -->
    <right-side></right-side>

    <!-- 新人礼包 卡卷 -->
    <user-gift></user-gift>
  </div>
</template>

<script>
import appHeader from './components/header'
import appFooter from './components/footer'
import appMain from './components/main'
import rightSide from './components/side'
import userGift from './components/userGift'
export default {
  name: 'Layout',
  data() {
    return {}
  },
  components: {
    appHeader,
    appFooter,
    appMain,
    rightSide,
    userGift
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  computed: {
    isLoading() {
      return this.$store.getters['loading/isLoading']
    }
  },
  methods: {
    reload() {
      this.$store.commit('loading/useRouterAlive')
    }
  }
}
</script>

<style lang="scss">
.page {
  background-color: $bg-color-grey;
}
</style>
